<template>
    <!-- 一个template下面只能有一个根div，其他的div都应该放在里面 -->
    <div class="user">

        <el-card class="box-card" shadow="never" style="height: 80px;">
            <!-- 增加按钮与搜索按钮和搜索框放在一个div里面，代表一个横行 -->
            <div style="margin-bottom: 20px; ">
                <!-- 搜索框，绑定的是下面定义的字符串变量input，clearable代表输入框可一键删除-->
                <el-input v-model="selectForm.name" style="width:200px;" placeholder="请输入姓名"
                    prefix-icon="el-icon-search" clearable></el-input>
                <el-input v-model="selectForm.phone" style="width:200px; margin-left: 15px;" placeholder="请输入电话号"
                    prefix-icon="el-icon-search" clearable></el-input>

                <!-- plain的意思是按钮变为浅色主题 -->
                <el-button size="medium" type="primary" style="margin-left: 10px;" plain
                    @click="this.getList">搜索</el-button>
                <el-button size="medium" type="primary" style="margin-left: 10px;" plain
                    @click="this.reset">重置</el-button>
                <el-button size="medium" type="primary" style="margin-left: 10px;" plain
                    @click="this.clearTableData">我不想看这些破玩意</el-button>
                <el-button size="medium" type="success" style="margin-left: 50px;" plain
                    @click="this.openDialog">添加</el-button>
            </div>
        </el-card>

        <!-- 表格：border类型为boolean意思是带边框，stripe意思是带斑马纹,类型是boolean -->
        <div style='height:calc(100vh - 600px); margin-top: 10px;'>
            <el-card class="box-card"  shadow="never">
            <el-table :data="tableData" stripe style="width: 100%; overflow-y: auto;" max-height="800px"
                highlight-current-rowborder>
                <!-- 
                    prop给本列取名为date，这个prop与到时候传参名对应
                    label表示表示页面显示为日期
                    width设置了显示的宽度
                    align表示对齐方式，默认是居左，这里设置为中心对齐
                 -->
                <el-table-column prop="id" label="id" width="100" align="center" />
                <el-table-column prop="name" label="姓名" align="center" />
                <el-table-column prop="age" label="年龄" width="120" align="center" />
                <el-table-column prop="studentClass" label="班级" align="center" />
                <el-table-column prop="phone" label="手机号" align="center" />
                <el-table-column prop="createBy" label="创建者" align="center" />
                <el-table-column prop="createTime" label="创建时间" width="200" align="center" />
                <el-table-column prop="remark" label="备注" align="center" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- 更新按钮 -->
                        <el-button size="mini" plain @click="openDialog(scope.row)">编辑</el-button>
                        <!-- 传入当前行的id -->
                        <el-button size="mini" type="danger" plain @click="deleteById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!-- 分页器 -->
            <!-- 
            align='center'对齐方式居中
            @size-change表示每页显示多少条改变时触发
            @current-change表示当前页码改变时触发
            :current-page表示当前页码
            :page-sizes表示每页显示多少条的选项，可以自定义
            layout='prev, pager, next, jumper'表示显示页码，上一页，下一页，跳转
            :total表示总共有多少页
            -->
            <div class="block" style="margin-top:15px; margin-bottom: auto;">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleNumChange"
                    :current-page="pageParams.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="this.total">
                </el-pagination>
            </div>
        </el-card>
        </div>



        <!-- 增加或修改的对话框dialog -->
        <!-- close-on-click-modal点击遮罩层是否关闭对话 -->
        <!-- :show-close="true",是否展示删除按键 -->
        <!-- :destroy-on-close="true" 关闭对话框摧毁所有元素 -->
        <div>
            <el-dialog :title="addOrUpdateFlag" :visible.sync="dialogOpen" :close-on-click-modal="false"
                :destroy-on-close="true" width="50%" :show-close="true" center>
                <el-form :model="form" :rules="rules" ref="ruleRef">

                    <!-- 放在一行里 -->
                    <el-row style="display: flex;justify-content: center;width: 100%;margin: 0 auto;">
                        <!-- 定义每一行的宽度 -->
                        <!-- label-width="70px"可以用来限制label不被挤到上面去 -->
                        <el-col :span="8">
                            <el-form-item label="姓名:" label-width="70px" prop="name">
                                <el-input placeholder="请输入姓名" v-model="form.name" autocomplete="off" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="margin-left: 5px;">
                            <el-form-item label="年龄:" prop="age" label-width="70px">
                                <el-input placeholder="请输入年龄" v-model.number="form.age" autocomplete="off" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 放在一行里 -->
                    <el-row style="display: flex;justify-content: center;width: 100%;margin: 0 auto;">
                        <!-- 定义每一行的宽度 -->
                        <el-col :span="8">
                            <el-form-item label="班级:" label-width="70px">
                                <el-input placeholder="请输入班级" v-model="form.studentClass" autocomplete="off"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="margin-left: 6px;">
                            <el-form-item label="手机号:" prop="phone" label-width="70px">
                                <el-input placeholder="请输入手机号" v-model.number="form.phone" autocomplete="off" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 放在一行里 -->
                    <el-row style="display: flex;justify-content: center;width: 96%;margin: 0 auto;">
                        <!-- 定义每一行的宽度 -->
                        <el-col :span="17">
                            <el-form-item label="备注:" label-width="70px">
                                <el-input :rows="6" placeholder="请输入备注" v-model="form.remark" autocomplete="off"
                                    type="textarea" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="validateForm('ruleRef')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped></style>

<script>

import request from '@/utils/request';
import { Message } from 'element-ui';

// export default是导出一个模块的默认内容，其他文件可以通过import语句来引入并使用这个默认导出的内容。
export default {

    // 定义一些数据，供其他组件调用
    data() {
        return {

            //分页查询使用的url参数
            pageParams: {
                pageNum: 1,
                pageSize: 15,
            },

            //模糊查询用参数
            selectForm: {
                name: '',
                phone: ''
            },

            // 表格对应数据
            tableData: [],

            //分页查询总数
            total: 0,

            //增加修改对话框显示状态
            dialogOpen: false,

            //增加修改对话框-每行属性的样式
            formLabelWidth: '120px',

            //添加或者更新的对话框标题
            addOrUpdateFlag: '',

            //添加或修改表单
            form: {
                id: '',
                name: '',
                age: '',
                studentClass: '',
                phone: '',
                remark: '',
            },

            //必填校验,blur失去焦点触发,change发生变化触发
            rules: {
                name: [
                    { required: true, message: "姓名不能为空", trigger: "blur" }
                ],
                phone: [
                    { required: true, message: "手机号不能为空"},
                    { type: 'number', message: '手机号必须为数字值'}
                ],
                age: [
                    { type: 'number', message: '年龄必须为数字值'}
                ],
            },

        }
    },

    //页面加载默认调用created里面的方法
    created() {
        this.getList();

    },
    mounted() {

    },

    // methods方法，里面定义一些方法，供页面上的控件调用（包括调用后台接口都是在这里进行）
    methods: {

        //请求列表方法
        getList() {

            // 将params参数拼接在URL中
            const url = `/student/list?${new URLSearchParams(this.pageParams).toString()}`;

            //发起请求,selectForm定义的东西放在
            request.post(url, this.selectForm).then(res => {
                //注意code的类型是数字还是字符串
                if (res.code === 200) {
                    // 把后台返回的数据赋值给tableData
                    // this是因为vue的this指向vue实例，this.tableData是vue实例的tableData属性
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    // 如果状态码不是 200，则显示 Element UI 的弹窗警告
                    //res即是我们定义的result
                    this.alertMessage(res.msg, 'error');
                    // 返回一个 Promise.reject，以便在调用端捕获错误
                    return Promise.reject(res);
                }
            }).catch(error => { //请求失败打印错误信息并弹窗
                console.log("error:" + error);
                //this.alertMessage("未知错误!",'error');
            })
        },

        // 根据id删除数据的方法
        deleteById(id) {
            // 弹出确认删除提示框
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log("id:" + id);
                // 用户点击确定按钮时执行的操作
                // 发起删除请求
                request.delete(`/student/${id}`)
                    .then(res => {
                        // 处理成功响应
                        if (res.code === 200) {
                            this.alertMessage(res.msg, 'success');
                            this.getList();
                        } else {
                            this.alertMessage(res.msg, 'error');
                        }
                    })
                    .catch(error => {
                        console.log("error:" + error);
                    });
            }).catch((error) => {
                // 用户点击取消按钮时执行的操作
                // 显示已取消删除的提示消息
                this.$message({
                    type: 'info',
                    message: error
                });
            });
        },

        //设置弹出信息框方法
        alertMessage(msg, type) {
            Message({
                message: msg,
                type: type,
            });
        },

        //重置搜索框
        reset() {
            this.selectForm.name = null;
            this.selectForm.phone = null;

            //添加evt参数纯粹是为了让按钮能够恢复
            this.getList();
        },

        //切换分页器的当前页
        handleSizeChange(size) {
            this.pageParams.pageSize = size;
            this.getList();
        },

        //切换分页器的容量
        handleNumChange(current) {
            this.pageParams.pageNum = current;
            this.getList();
        },

        //清除表格中的所有数据
        clearTableData() {
            this.tableData = [];
        },

        //打开增加更新对话框
        openDialog(row) {

            //重置form表单属性
            this.form = {};

            this.dialogOpen = true;

            //对表单中的数据进行判断,如果有id就是更新操作,没有id就是添加操作
            if (row.id) {
                this.addOrUpdateFlag = '更新信息';
                //将表格中的数据转移到表单中
                this.form = { ...row };
            } else {
                this.addOrUpdateFlag = '添加信息';
            }
        },

        //关闭增加更新对话框
        closeDialog() {
            console.log("进入方法closeDialog")
            this.dialogOpen = false;
        },

        //添加或更新方法
        addOrUpdate() {

            //判断是添加还是更新
            if (this.form.id) {
                //更新
                request.post('/student/update', this.form).then(res => {
                    if (res.code === 200) {
                        this.alertMessage(res.msg, 'success');
                        this.getList();
                        this.dialogOpen = false;
                        this.closeDialog(); 1
                    } else {
                        this.alertMessage(res.msg, 'error');
                    }
                }).catch(error => {
                    console.log("updateError:" + error);
                }
                );
            } else {
                //添加
                request.post('/student/add', this.form).then(res => {
                    if (res.code === 200) {
                        console.log("1");
                        this.alertMessage(res.msg, 'success');
                        console.log("2");
                        this.getList();
                        console.log("3");
                        this.dialogOpen = false;
                        console.log("4");
                        this.closeDialog();
                    } else {
                        this.alertMessage(res.msg, 'error');
                    }
                }).catch(error => {
                    console.log("addError:" + error);
                }
                );
            }
        },

        //验证表单校验方法
        validateForm(ruleRef) {
            this.$refs[ruleRef].validate((valid) => {
                if (valid) {
                    //console.log("校验成功!");
                    this.addOrUpdate();
                }
            });
        },
    },
}
</script>
<style>
/* 定义输入框的高度，直接定义div或者input标签都没好使 */
.el-input__inner {
    height: 37px !important;
    line-height: 37px !important;
}

/* 定义两个并列的输入框中间间隔 */
.spaced-col {
    margin-left: 20px;
    /* 调整间距大小 */
}
</style>